<template>
    <div class="info" v-if="subactionid != 0">
        <ul class="info-left">
            <!--<li>
                <div class="td">
                    URL
                    <span class="v-tips tips">2</span>
                </div>
            </li>-->
<!--            <li class="act">
                <div class="td">接口服务</div>
                <div class="bd"
                     :class="{'acted': mAct == item.seq}"
                     v-for="(item, index) in subActionList">
                    <div @click="itemClick(item.seq, item.esbserviceid, item.module, item.dependentResource)">
                    <p class="p1">{{item.servname}}</p>
                    <p class="p2">{{item.servcode}}@{{item.servversion}}</p></div>
                    <div v-if="exceptions[item.esbserviceid]" class="v-lights lights">{{exceptions[item.esbserviceid]}}</div>
                    <div class="right-triangle"></div>
                    <i class="top el-icon-caret-bottom" @click="loadMore(item.id, index)"></i>
                </div>
            </li>-->
            <el-tree ref="viewTree"
                     :data="subActionList"
                     node-key="id"
                     lazy
                     :load="loadNode"
                     :props="defaultProps"
                     @node-click="nodeClick"
                     :highlight-current="true"
                     :expand-on-click-node="false"
                     :default-expanded-keys="expandedKeys"
            >
<!--                        <span class="custom-tree-node" slot-scope="{ node, data }">-->
<!--                            <span class="">-->
<!--                                <i :class="node.icon"></i>-->
<!--                                {{data.servname}}-->
<!--                                <span class="red v-lights"-->
<!--                                      v-if="exceptions[data.esbserviceid]"-->
<!--                                >{{exceptions[data.esbserviceid]}}</span>-->
<!--                            </span>-->
<!--                         </span>-->
                <div class="bd" slot-scope="{ node, data }"
                     :class="{'acted': mAct == data.seq}">
                    <i :class="node.icon"></i>
                    <div>
                        <p class="p1" :title="data.servcode + '@' + data.servversion">{{data.servname}}</p>
<!--                        <p class="p1" :title="data.servcode + '@' + data.servversion">{{data.servcode}}</p>-->
                    </div>
                    <div v-if="exceptions[data.esbserviceid]" class="v-lights lights">{{exceptions[data.esbserviceid]}}</div>
                </div>
            </el-tree>
        </ul>
        <v-service v-if="mAct != 0" :esbServiceId="showId" :module="showModule"
                   :dependentResource="showResource" :showRadar="true"></v-service>
    </div>
</template>

<script>
import vService from './Service'
import { get, post } from '@/utils/request.js';

export default {
    name: "SubAction",
    data() {
        return {
            mAct:0,
            subActionList: [],
            exceptions: {},
            showId: 0,
            showModule: "",
            showResource: "",
            showParent: -1,
            defaultProps: {
                children: 'children',
                label: 'servname',
                isLeaf: 'isLeaf'
            },
            expandedKeys: []
        }
    },
    props: ["subactionid"],
    components: {
        vService
    },
    watch: {
        subactionid(newValue, oldValue) {
            if (newValue != 0 && newValue != oldValue) {
                this.loadSubAction(newValue, "");
            }
        }
    },
    methods:{
        loadSubAction(subactionId, parentId) {
            this.mAct = 0;
            this.exceptions = {};
            this.subActionList = [];
            if(subactionId == undefined) return;
            // get('/esbview/v-subaction/listDetail/' + subactionId + '?parentId=' + parentId, '').then(res => {
            //     this.subActionList = res.list;
            // });
            // get('/esbview/v-subaction/exceptions/' + subactionId, '').then(res => {
            //     this.exceptions = res.exceptions;
            //     if (this.exceptions == undefined) {
            //         this.exceptions = {};
            //     }
            // });
        },
        itemClick(seq, serviceId, module, resource) {
            this.mAct = seq;
            this.showId = serviceId;
            this.showModule = module;
            this.showResource = resource;
        },
        loadNode(node, resolve) {
            // resolve(this.subActionList);
            let pid = node.data.esbserviceid;
            if (pid == undefined) pid = 0;
            get('/esbview/v-subaction/listDetail/' + this.subactionid + '?parentId=' + pid, '').then(res => {
                // this.subActionList = res.list;
                resolve(res.list);
            });
            get('/esbview/v-subaction/exceptions/' + this.subactionid, '').then(res => {
                this.exceptions = res.exceptions;
                if (this.exceptions == undefined) {
                    this.exceptions = {};
                }

            });
        },
        nodeClick(data, checked, node) {
            this.mAct = data.seq;
            this.showId = data.esbserviceid;
            this.showModule = data.module;
            this.showResource = data.dependentResource;
        }
    }
}
</script>

<style lang="scss" scoped>
$borderColor: #e4e7f0;
$actBorderColor: #ffc5b9;
$actColor: #f58e7a;
$iconbg: #a9b1c8;
.info {
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid $borderColor;
    border-radius: 3px;
    background-color: #fff;

    .info-left {
        width: 170px;
        padding-left: 10px;
        padding-top: 15px;

        .td {
            margin-bottom: 15px;
            width: 102px;
            height: 25px;
            padding-left: 8px;
            line-height: 25px;
            border: 1px solid $borderColor;
            position: relative;
            text-align: left;
            font-size: 12px;
            border-radius: 3px;

            .tips {
                position: absolute;
                top: -3px;
                right: -4px;
            }
        }

        .bd {
            width: 140px;
            /*height: 36px;*/
            /*margin-left: 8px;*/
            border-radius: 3px;
            font-size: 12px;
            //border: 1px solid $borderColor;
            padding-top: 4px;
            padding-left: 4px;
            padding-bottom: 5px;
            /*margin-bottom: 15px;*/
            position: relative;

            .lights {
                position: absolute;
                top: 1px;
                right: 0;
            }

        }

        .act {
            .acted {
                background-color: $actColor;
                color: #fff;

                .right-triangle {
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 14px;
                    right: -6px;
                    border-top: 9px solid transparent;
                    border-left: 6px solid $actColor;
                    border-bottom: 9px solid transparent;
                }
            }

            .td {
                border-color: $actBorderColor;
            }
        }
    }


}
.top {
    color: $iconbg;
}

.p1 {
    font-size: 12px;
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.p2 {
    font-size: 10px;
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>